{% extends "base.html" %}

{% block header %}
<link rel="stylesheet" href="/css/staff.css">
{% endblock %}

{% block content %}
<div class="container">
    <div class="row mb-4 fade-in">
        <div class="col">
            <h3 class="display-4 fw-bold text-primary mb-0">Staff Manage</h3>
            <p class="text-secondary mb-0">Manage your staff members</p>
        </div>
        <div class="col-auto">
            <button class="btn btn-add-staff" data-bs-toggle="modal" data-bs-target="#addStaffModal">
                <i class="bi bi-plus-lg"></i> Add Staff
            </button>
        </div>
    </div>

    <table class="staff-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>WorkNum</th>
                <th>Password</th>
                <th>Team</th>
                <th>Role</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for staff,team_name,role_name in staffs %}
            <tr>
                <td>{{ loop.index0 +1 }}</td>
                <td>{{ staff.username }}</td>
                <td>{{ staff.job_n }}</td>
                <td>{{staff.password}}</td>
                <td>{{ team_name }}</td>
                <td>{{ role_name }}</td>
                <td>
                    <div class="form-check form-switch">
                        {% if staff.id != 1 %}
                        	<input class="form-check-input" type="checkbox" role="switch"
                               id="status_{{ staff.id }}"
                               {% if staff.user_exit %}checked{% endif %}
                               onchange="updateStaffStatus(this, '{{ staff.id }}')">
                        {% else %}
                        	<input class="form-check-input" type="checkbox" role="switch"
                               id="status_{{ staff.id }}"
                               {% if staff.user_exit %}checked disabled{% endif %}
                               onchange="updateStaffStatus(this, '{{ staff.id }}')">
                        {% endif %}

                    </div>
                </td>
{#            编辑按钮#}
                <td class="action-buttons">
                    <button class="btn btn-sm btn-edit" data-bs-toggle="modal" data-bs-target="#editStaffModal" onclick="editStaff({{ staff.id }})">
                        <i class="bi bi-pencil-square"></i> Edit
                    </button>
{#                删除按钮#}
                    {% if staff.id != 1 %}
                    	<button class="btn btn-sm btn-delete" data-bs-toggle="modal" data-bs-target="#deleteStaffModal" onclick="deleteStaff({{ staff.id }})">
                        <i class="bi bi-trash"></i> Delete
                    </button>
                    {% else %}
                    	<button class="btn btn-sm btn-delete" disabled onclick="deleteStaff({{ staff.id }})">
                        <i class="bi bi-trash"></i> Delete
                    </button>
                    {% endif %}

                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- Add Staff Modal -->
<div class="modal fade" id="addStaffModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-person-plus me-2"></i>Add New Staff</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="addStaffForm" method="post">
                    <div class="mb-3">
                        <label class="form-label" >Name</label>
                        <input type="text" class="form-control" name="name" placeholder="Enter staff name" required>
                        <span id="nameError" class="error" style="display:none; color:red;">name not null and limit 10</span>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">WorkNum</label>
                        <input type="text" class="form-control" name="workNum" placeholder="Enter work number" required>
                        <span id="workNumError" class="error" style="display:none; color:red;">worknum not null and limit 10</span>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Password</label>
                        <input type="password" class="form-control" name="password" placeholder="Enter password" required>
                        <span id="passwordError" class="error" style="display:none; color:red;">password not null and limit 10</span>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Role</label>
                        <select class="form-select" name="role">
                            {% for role in roles %}
                            <option value="{{role.id}}">{{role.role_name}}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Team</label>
                        <select class="form-select" name="team">
                            {% for team in teams %}
                                <option value="{{ team.id }}">{{ team.team_name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="submitAddStaff()">Add Staff</button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Staff Modal -->
<div class="modal fade" id="editStaffModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-pencil-square me-2"></i>Edit Staff</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="editStaffForm">
                    <input type="hidden" name="staff_id" id="edit_staff_id">
                    <div class="mb-3">
                        <label class="form-label">Name</label>
                        <input type="text" class="form-control" name="name" id="edit_name" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">WorkNum</label>
                        <input type="text" class="form-control" name="workNum" id="edit_workNum" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Password</label>
                        <input type="password" class="form-control" name="password" id="edit_password">
                        <small class="text-muted">Leave blank to keep current password</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Role</label>
                        <select class="form-select" name="role" id="edit_role">
                            {% for role in roles  %}
                            	<option value="{{ role.id }}">{{ role.role_name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Team</label>
                        <select class="form-select" name="team" id="edit_team">
                            {% for team in teams %}
                            <option value="{{ team.id }}">{{ team.team_name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" tabindex="-1" onclick="cancel()">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="submitEditStaff()">Save Changes</button>
            </div>
        </div>
    </div>
</div>

<!-- Delete Staff Confirmation Modal -->
<div class="modal fade" id="deleteStaffModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-exclamation-triangle-fill text-danger me-2"></i>Delete Staff</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this staff member? This action cannot be undone.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" onclick="confirmDeleteStaff()">Delete</button>
            </div>
        </div>
    </div>
</div>
<script>


</script>
<script src="js/staff.js"></script>
{% endblock %}